{% extends "base.html" %}

{% load comments diggpaginator %}

{% block title %}Liste des tickets{% endblock %}
{% block content_title %}Liste des tickets{% endblock %}
{% block image %}<img src="{{ MEDIA_URL }}images/oxygen/search.png" />{% endblock %}

{% block extrajs %}
<script type="text/javascript" charset="utf-8">
    function show_selected_action(value) {
        if (value == "action_close_tickets")
            dojo.style("id_close_comment", "display", "inline-block");
        else
            dojo.style("id_close_comment", "display", "none");
    }

    dojo.addOnLoad(function() {

        // Selection des checkbox en masse
        dojo.connect(dojo.byId("select_all"), "onclick", function(evt) {
            if (dojo.byId("select_all")) {
                var val = dojo.byId("select_all").checked;

                dojo.query("input[type^='checkbox'][id^='ticket_select']").forEach(function(tag) {
                    tag.checked = val;
                    if (val)
                        dojo.addClass(tag.parentNode.parentNode, "selected");
                    else
                        dojo.removeClass(tag.parentNode.parentNode, "selected");
                });
            }
        });

        dojo.query("input[type^='checkbox'][id^='ticket_select']").forEach(function(tag) {
            dojo.connect(tag, "onchange", function() {
                if (tag.checked)
                    dojo.addClass(tag.parentNode.parentNode, "selected");
                else
                    dojo.removeClass(tag.parentNode.parentNode, "selected");
            });
        });

        dojo.connect(dijit.byId("id_action-actions"), "onChange", function(evt) {
            show_selected_action(dijit.byId("id_action-actions").attr("value"));
        });
        if (dijit.byId("id_action-actions"))
            show_selected_action(dijit.byId("id_action-actions").attr("value"));
    });
</script>
{% endblock %}

{% block content %}

<form method="POST" action="?page=1" id="list_form">{% csrf_token %}
{% block list_filters %}
<fieldset class="form">
  <legend>Filtrage</legend>
    <table class="search">
        <tr>
            <th>{{ form.client.label_tag }}</th>
            <td>{{ form.client }}</td>
            <th>{{ form.state.label_tag }}</th>
            <td>{{ form.state }}</td>
            <th>{{ form.text.label_tag }}</th>
            <td>{{ form.text }}</td>
        </tr>
    </table>
    <button type="reset" dojoType="dijit.form.Button">Annuler
        <script type="dojo/method" event="onClick">
            dojo.doc.location = "?reset=1";
        </script>
    </button>
    <button type="submit" dojoType="dijit.form.Button" name="validate-filters" value="1">Rechercher
        <script type="dojo/method" event="onClick">
            dojo.byId("list_form").action = "?page=1"
        </script>
    </button>
    <button type="button" dojoType="dijit.form.Button">Créer une nouvelle vue
        <script type="dojo/method" event="onClick">
            dojo.doc.location = "{% url ticket_list_view %}?reset=1";
        </script>
    </button>
{% if export_link %}
    <button type="button" dojoType="dijit.form.Button" iconClass="dijitIconFile">Export CSV
        <script type="dojo/method" event="onClick">
            dojo.doc.location = "{{ export_link }}";
        </script>
    </button>
{% endif %}
</fieldset>
{% endblock %}

{% if tickets.object_list %}

{% if tickets.paginator.num_pages > 1 %}
{% diggpaginator tickets %}
{% endif %}

{{ action_form.non_field_errors }}
{{ action_form.comment }}
<table class="resultat" id="ticket_result_small">
<tr class="form">
    <td colspan="11">
        {{ action_form.actions }}

        <div id="id_close_comment" style="display: none;">
            <div dojoType="dijit.form.DropDownButton" >
                <span>Commentaire de clotûre</span>
                <div dojoType="dijit.TooltipDialog">
                    <textarea cols="50" rows="10" id="id_tooltip_comment"></textarea>
                    <script type="dojo/method" event="onClose">
                            dijit.byId("id_action-comment").attr("value", dojo.byId("id_tooltip_comment").value);
                    </script>
                </div>
            </div>
        </div>
        <button dojoType="dijit.form.Button" type="submit" name="validate-actions" id="validate-actions" value="1">Valider
            <script type="dojo/method" event="onClick">
                // TODO Tester les champs obligatoire avant de valider
                return true;
            </script>
        </button>
    </td>
</tr>
<thead>
<tr>
    <th style="text-align: center;"><input type="checkbox" id="select_all" /></th>
    <th><a href="?sort=id&sort_order={{ sort_order }}">Id</a></th>
    <th><a href="?sort=client&sort_order={{ sort_order }}">Client</a></th>
    <th><a href="?sort=category&sort_order={{ sort_order }}">Catégorie</a></th>
    <th><a href="?sort=title&sort_order={{ sort_order }}">Titre</a></th>
    <th><a href="?sort=nb_comments&sort_order={{ sort_order }}">Commentaires</a></th>
    <th><a href="?sort=contact&sort_order={{ sort_order }}">Contact</a></th>
    <th><a href="?sort=last_modification&sort_order={{ sort_order }}">Dernières modif.</a></th>
</tr>
</thead>
<tbody>
{% for row in tickets.object_list %}
    {# get_comment_count for ticket.ticket row.id as comment_count #}
    <tr class="bigrow {% cycle 'row1' 'row2' as rowcolor %}">
        <td class="bigrow"><input type="checkbox" name="ticket_checked" id="ticket_select_{{ forloop.counter }}" value="{{ row.pk }}" /></td>
        <td class="bigrow" rowspan="{{ row.enfants|length|add:"1" }}" style="width: 60px;{{ row.close_style }}{{ row.priority_back_style }}"><a style="{{ row.priority_text_style }}" href="{% url ticket_modify row.id %}">{{ row.id }}</a></td>
        <td class="bigrow" style="width: 200px;">{% if row.client %}{{ row.client }}{% endif %}</td>
        <td class="bigrow" style="width: 100px;">{{ row.category }}</td>
        <td class="bigrow" style="min-width: 250px;{{ row.close_style }}"><a styl="{{ row.priority_text_style }}" href="{% url ticket_modify row.id %}">{{ row.title }}</a></td>
        <td class="bigrow">({{ row.nb_comments }})</td>
        <td class="bigrow">{{ row.contact }}</td>
        <td class="bigrow" style="width: 150px;">{{ row.last_modification|date:'d/m/y H\hi' }}</td>
    </tr>
    {% for child in row.enfants %}
        <tr class="{{ rowcolor }}" id="ticket_child{{ forloop.parentloop.counter }}_line_{{ forloop.counter }}">
            <td><input type="checkbox" name="ticket_checked" id="ticket_child{{ forloop.parentloop.counter}}_select_{{ forloop.counter }}" value="{{ child.pk }}" /></td>
            <td colspan="7" class="rowchild"><img src="{{ MEDIA_URL }}images/oxygen/code-class.png" alt="-->" />&nbsp;<span style="{{ child.close_style }}"><a sytle="{{ child.priority_text_style }}" href="{% url ticket_modify row.id %}#child{{ child.id }}">{{ child.title|truncatewords:8 }}</a></span></td>
        </tr>
    {% endfor %}
{% endfor %}
</tbody>
</table>
</form>

{% if tickets.paginator.num_pages > 1 %}
{% diggpaginator tickets %}
{% endif %}

{% else %}
<h3>Aucun résultat</h3>
{% endif %}

{% endblock %}
